<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>山东省非物质文化遗产分布</title>
    <!--<link rel="stylesheet" type="text/css" href="css/ol.css" />-->
    <!--<link rel="stylesheet" type="text/css" href="css/ol3-popup.css" />-->
    <!--<link rel="stylesheet" type="text/css" href="css/ol3-ext.css" />-->
    <link rel="stylesheet" type="text/css" href="css/map.css" />
    <link rel="stylesheet" type="text/css" href="./css/iconfont/iconfont.css" />
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="css/alert.css">

</head>
<style>
    .nav-li{
        position: relative;
        display: inline-block;
        vertical-align: middle;
        line-height: 60px;
    }
    .ol-popup {
        position: absolute;
        background-color: white;
        -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
        padding: 15px;
        border-radius: 10px;
        border: 1px solid #cccccc;
        bottom: 12px;
        left: -50px;
        min-width: 120px;
        display: none;
        width: 245px;
        color: #ca2222;
        font-weight: bold;
        box-shadow: #906767 3px 3px 15px 2px;
    }

    .ol-popup:after, .ol-popup:before {
        top: 100%;
        border: solid transparent;
        content: " ";
        height: 0;
        width: 0;
        position: absolute;
        pointer-events: none;
    }

    .ol-popup:after {
        border-top-color: white;
        border-width: 10px;
        left: 48px;
        margin-left: -10px;
    }

    .ol-popup:before {
        display: none;
        border-top-color: #cccccc;
        border-width: 11px;
        left: 48px;
        margin-left: -11px;
    }
    .ol-popup-closer {
        text-decoration: none;
        position: absolute;
        top: 5px;
        right: 10px;
    }
    .ol-popup-closer:after {
        content: "✖";
    }
</style>


<body>
    <!--地图部分-->
    <div class="map" id="map"></div>


    <!--右侧地图工具栏-->
    <div class="con-right">
        <div id="rightBtn">
            <i class="my-icon icon-zhankai"></i>
        </div>
        <div class="con-right-list" data-type="">
            <div class="rt-bt1"><a href="javascript:;" data-type="1"></a></div>
            <div class="rt-bt2"><a href="javascript:;" data-type="2"></a></div>
            <div class="rt-bt3"><a href="javascript:;" data-type="3"></a></div>
            <div class="rt-bt4"><a href="javascript:;" data-type="4"></a></div>
            <div class="rt-bt5"><a href="javascript:;" data-type="5"></a></div>
            <div class="rt-bt6"><a href="javascript:;" data-type="6"></a></div>
            <div class="rt-bt7"><a href="javascript:;" data-type="7"></a></div>
        </div>
    </div>

    <!-- 透明度DOM -->
    <div id="tmdAlert" class="alert-con alert-dt">
        <div class="tmd-tit">透明度:</div>
        <div id="slideTmd" class="demo-slider"></div>
    </div>

    <!-- 定位 -->
    <div class="search-2D">
        <input type="text" class="search-2D-inp" placeholder="120.123456,34.123456">
        <button type="button" id="search2DBtn">&nbsp;</button>
    </div>

    <!--地图弹窗-->
    <div id="popup" class="ol-popup">
        <a href="#" id="popup-closer" class="ol-popup-closer"></a>
        <div id="popup-content"></div>
    </div>

    <!--右下方底图切换-->
    <div class="con-right-map">
        <div class="right-m">
            <div class="right-map">
                <span>矢量</span>
            </div>
        </div>
        <div class="right-m">
            <div class="right-map">
                <span>遥感</span>
            </div>
        </div>
        <div class="right-m">
            <div class="right-map">
                <span>DEM</span>
            </div>
        </div>
        <div class="right-m">
            <div class="right-map right-map-hover">
                <span>倾斜</span>
            </div>
        </div>
    </div>

    <div class="con-right-mapbtn">
        <!--<button class="mapbtn mapbtn-1"></button>-->
        <!--<br>-->
        <button type="button" class="mapbtn mapbtn-2">2D</button>
        <br>
        <button type="button" class="mapbtn mapbtn-3">
            <i class="my-icon icon-jietu"></i>
        </button>
        <!--<br>-->
        <!--<button class="mapbtn mapbtn-4">-</button>-->
    </div>





    <script src="layui/layui.js"></script>
    <script>
        layui.use('slider', function(){
            var slider = layui.slider;

            //渲染
            slider.render({
                elem: '#slideTmd'
                , value: 100 //初始值
                , min: 0 //最小值
                , max: 100 //最大值
                , tips: false// 是否提示
                , change: function (value) {
                    TouMingDu(true, value / 100);
                }
            });
        });

        var closer = document.getElementById('popup-closer');
        closer.onclick = function () {
            $("#popup").hide();

        };

    </script>


    <script type="text/javascript" src="dist/openlayers/include-openlayers.js"></script>
    <script type="text/javascript" src="js/plugins/jquery.js"></script>
    <script type="text/javascript" src="js/plugins/echarts.min.js"></script>
    <!--<script type="text/javascript" src="js/plugins/ol-debug.js" ></script>-->
    <!--<script type="text/javascript" src="js/plugins/ol-ext.js" ></script>-->
    <!--<script type="text/javascript" src="js/plugins/ol3-popup.js" ></script>-->
    <script type="text/javascript" src="js/plugins/jsts.min.js" ></script>
    <script type="text/javascript" src="js/plugins/proj4.js" ></script>
    <script type="text/javascript" src="js/plugins/index.min.js" ></script>
    <script type="text/javascript" src="js/interface.js"></script>

    <script type="text/javascript" src="./js/fileSave.js"></script>
    <!--<script type="text/javascript" src="js/plugins/iclient9-openlayers.min.js"></script>-->
    <script type="text/javascript" src="js/initMap.js"></script>
    <script type="text/javascript" src="js/map.js"></script>
    <!--<script src="layui/layui.js"></script>-->
    <script src="js/navBar.js"></script>

</body>
</html>